<template>
  <view class="rf-category">
    <view class="category-top-wrappper">
      <view class="shop-logo">
        <image class="shop-logo-image" :src="business.logo || shangju"></image>
        <view class="shop-content">
          <view class="shop-name"> {{ business.shop_name }}</view>
          <view class="shop-num"> {{ business.favorite_count }}人关注 </view>
        </view>
      </view>
      <view
        class="guanzhu-btn"
        @tap="handleFavorite(false)"
        v-if="business.favorite == true"
      >
        已关注
      </view>
      <view class="guanzhu-btn" @tap="handleFavorite(true)" v-else>+关注</view>
    </view>
    <view class="input-box" @tap="toSearch">
      <input disabled />
      <view class="wrapper">
        <text class="iconfont iconsousuo2"></text>
        <input
          type="text"
          placeholder="搜索商品"
          @tap.stop="navToSearch"
          disabled
        />
      </view>
    </view>
    <view class="category-list" @touchmove.stop.prevent="moveHandle">
      <!-- 左侧分类导航 -->
      <scroll-view scroll-y="true" class="left">
        <view
          class="row"
          v-for="(fItem, fIndex) in firstList"
          :key="fItem.id"
          :class="[fIndex === showCategoryIndex ? 'on' : '']"
          @tap="showCategory(fIndex, fItem)"
        >
          <view>
            <view class="block"></view>
            {{ fItem.name }}
          </view>
        </view>
      </scroll-view>
      <!--右侧子导航-->
      <view class="right">
        <scroll-view scroll-y="true">
          <view>
            <view class="category">
              <view class="list">
                <view
                  v-for="(item, index) in categoryProductList"
                  @tap="navTo(`/pages/product/product?id=${item.id}`)"
                  :key="index"
                  class="list-wrapper"
                >
                  <view class="list-item-engine">
                    <image
                      class="image-item"
                      :src="item.images[0].path"
                    ></image>
                  </view>
                  <view class="engine-text"> {{ item.title }} </view>
                </view>
              </view>
              <view class="no-data" v-if="categoryProductList.length === 0">
                <i class="iconfont icon404"></i>
                暂无商品
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!--加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>
<script>
import { category, deleteproduct } from "@/api/basic";
import { product_category, favorite, business } from "@/api/product";
import rfSearchBar from "@/components/rf-search-bar";
import rfAttrContent from "@/components/rf-attr-content";
export default {
  components: {
    rfSearchBar,
    rfAttrContent,
  },
  data() {
    return {
      hotSearchDefault: "请输入关键字", // 搜索默认关键字
      showCategoryIndex: 0, // 一级菜单高亮显示序号
      categoryList: [], // 分类列表
      currentIndex: 0,
      firstList: [],
      business_id: null,
      specClass: "none", // 规格弹窗
      productDetail: {}, // 商品详情
      search: {},
      bottom: 90,
      tabbarLiat: ["全部", "出售中", "已下架"],
      smallTabbarLiat: ["小分类1", "小分类2", "小分类3"],
      cateTop: {}, // 分类通用广告图
      loading: true,
      styleCateType: this.$mSettingConfig.styleCateType,
      errorImage: this.$mAssetsPath.errorImage,
      shangju: this.$mAssetsPath.shangju,
      currentCateId: "",
      categoryProductList: [],
      business: {},
      price: "",
      total_sales: "",
      loadingType: "more",
      page: 1,
      productId: "",
      moneySymbol: this.moneySymbol,
      productLoading: true,
      currentSecondCategoryList: [],
      categoryInvertedIndex: 0,
      hasLogin: false,
      category_id: "",
    };
  },
  // 每次页面显示 执行该方法
  onLoad(option) {
    this.hasLogin = this.$mStore.getters.hasLogin;
    this.business_id = option.id;
    this.initData(option);
  },
  methods: {
    toSearch() {},
    moveHandle() {},
    //关注店铺
    async handleFavorite(favorite) {
      if (!this.business_id) return;
      if (!this.hasLogin) {
         this.$mRouter.push({ route: "/pages/public/login" });
      } else {
        this.business.favorite == true
          ? this.handleCollectCreate()
          : this.handleCollectDel();
      }
    },
    // 收藏店铺
    async handleCollectCreate() {
      await this.$http
        .post(`${favorite}`, {
          business_id: this.business_id,
        })
        .then(() => {
          this.$mHelper.toast("取消关注");
          this.getBusiness();
        });
    },
    // 取消收藏商品
    async handleCollectDel() {
      await this.$http
        .post(`${favorite}`, {
          business_id: this.business_id,
        })
        .then((res) => {
          this.$mHelper.toast("关注成功");
          this.getBusiness();
        });
    },
    //商品分类的操作
    handleShopCard(index) {
      this.currentIndex = index;
    },
    // 跳转至商品列表
    navTo(route) {
      this.$mRouter.push({ route });
    },
    // 通用跳转
    navToSearch() {
      this.$mRouter.push({
        route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`,
      });
    },
    // 数据初始化
    async initData() {
      this.search = uni.getStorageSync("search") || {};
      this.hotSearchDefault = this.search.hot_search_default || "请输入关键字";
      this.categoryList = [];
      this.categoryProductList = [];
      this.getBusiness();
      this.getProductCate("", "1");
    },
    // 获取商品分类列表
    async getProductCate(type, level) {
      await this.$http
        .get(`${category}`, { level: level })
        .then(async (res) => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.firstList = res.data;
          this.category_id = res.data[0].id;
          await this.getProductList();
          this.loading = false;
        })
        .catch(() => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.loading = false;
        });
    },
    //获取店铺信息
    async getBusiness() {
      await this.$http
        .get(`${business}/${this.business_id}`)
        .then(async (res) => {
          this.business = res.data;
          console.log("店铺信息", res);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 分类切换显示
    showCategory(index, item) {
      this.showCategoryIndex = index;
      this.category_id = item.id;
      this.getProductList();
    },
    // 获取产品列表
    async getProductList() {
      const params = {};
      params.page = this.page;
      await this.$http
        .get(`${business}/${this.business_id}`, {
          category_id: this.category_id,
        })
        .then((res) => {
          if (res.data && res.data.data.length > 0) {
            this.categoryProductList = res.data.data;
          } else {
            this.categoryProductList = [];
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background-color: $color-white;
}
.rf-category {
  background-color: $color-white;
  border-top: 1upx solid #eeeeee;
  .category-top-wrappper {
    padding: 22upx 30upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .shop-logo {
      display: flex;
      justify-content: space-between;
    }
    .shop-content {
      .shop-name {
        font-size: 30upx;
        font-weight: bold;
      }
      .shop-num {
        font-size: 24upx;
        color: #999999;
        font-weight: 500;
      }
    }
    .guanzhu-btn {
      width: 110upx;
      height: 50upx;
      background: #f91c1c;
      text-align: center;
      line-height: 50upx;
      border-radius: 35upx;
      color: #fff;
      font-size: 24upx;
      font-weight: 500;
    }
    .shop-logo-image {
      width: 80upx;
      margin-right: 20upx;
      height: 80upx;
      border-radius: 10upx;
      background: #ffd8d8;
    }
  }
  .input-box {
    width: 690upx;
    margin-left: 30upx;
    border-radius: 30upx;
    height: 60upx;
    line-height: 60upx;
    background: #eeeeee;
    border-radius: 30upx;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 30upx;
    .wrapper {
      display: flex;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 32%;
      font-size: $font-sm + 2upx;
      color: $font-color-light;
      transform: translate(-50%, -50%);
      .iconsousuo2 {
        font-size: 34upx;
        margin-right: -10upx;
        margin-top: -5upx;
      }
    }
    input {
      width: 100%;
      padding-left: 28upx;
      height: 28upx;
      color: #888;
      font-size: 28upx;
    }
  }
  /*模块分类*/
  .category-list {
    width: 100%;
    background-color: #fff;
    display: flex;
    .left,
    .right {
      position: absolute;
      border-top: 1upx solid #eeeeee;
      top: 213upx;
      bottom: 0;
    }
    .left {
      width: 220upx;
      left: 0upx;
      right: 0;
      background-color: #eeeeee;
      .row {
        width: 100%;
        height: 90upx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28upx;
        font-weight: 500;
        color: #999999;
        &.on {
          height: 100upx;
          background-color: #fff;
          font-weight: 500;
          color: #333333;
          font-size: 28upx;
          color: #2d2d2d;
        }
      }
    }
    .right {
      width: 530upx;
      right: 0;
      background-color: #fff;
      overflow: hidden;
      .second-category {
        z-index: 10;
        white-space: nowrap;
        width: 100%;
        margin: $spacing-sm $spacing-sm $spacing-base;
        .second-category-tag {
          margin-right: $spacing-base;
          padding: 5upx $spacing-lg;
          display: inline-block;
          border-radius: 8upx;
          font-size: $font-sm + 2upx;
        }
        .second-category-normal {
          color: $font-color-dark;
          border: none;
          background-color: $page-color-light;
        }
      }
      .category {
        width: 100%;
        bottom: 98upx;
        top: 4px;
        position: relative;
        .list {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;
          .list-wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: column;
            width: 33.33%;
            .list-item-engine {
              margin-top: 44upx;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              background: #eeeeee;
              margin-bottom: 14upx;
              .image-item {
                width: 120upx;
                height: 120upx;
              }
            }
            .engine-text {
              overflow: hidden;
              width: 80%;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 24upx;
              text-align: center;
              font-weight: 500;
            }
          }
        }
        .no-data {
          margin: 48upx 0;
          color: $font-color-light;
          display: flex;
          justify-content: center;
          align-items: center;

          .iconfont {
            margin-right: 20upx;
            font-size: $font-lg + 16upx;
          }
        }
      }
    }
  }
}
</style>
